<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
    <script src="../build/prop-types.js"></script>
  </head>
  <body>
    <div id="example1"></div>
    <div id="example2"></div>
    <div id="example3"></div>
	<script type="text/babel">
     //1.创建组件
    class Demo extends React.Component{
      //展示左侧输入框数据
      showData = ()=>{
        // const input = document.getElementById('input1')
        // alert(input.value)
        
        const{input1} = this
        console.log({input1});
        alert(input1.value)
      }

      showData2 = ()=>{
        const{input2} = this
        console.log({input2});
        alert(input2.value)
      }
  
      render(){
        return (
          <div>
            <input ref={c => this.input1 = c} type="text" placeholder=""/>&nbsp;
            <button onClick={this.showData}>点我提示左侧数据</button>&nbsp;
            <input ref={c => this.input2 = c} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
          </div>
        )
      }
    }



    //渲染组件到页面
    ReactDOM.render(<Demo name="tom" speak="speak"/>,document.getElementById('example1'))

	</script>
  </body>
</html>
